<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>营销活动列表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-marketing.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">营销活动</h1>
                <button onclick="showFilterMenu()" class="text-white hover:opacity-80 relative">
                    <i class="fas fa-filter text-lg"></i>
                    <span id="filterIndicator" class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full hidden"></span>
                </button>
            </div>
        </div>

        <!-- Stats Overview -->
        <div class="px-4 py-3 bg-gradient-to-r from-indigo-600 to-purple-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3">
                <div class="grid grid-cols-3 gap-3 text-white text-center">
                    <div>
                        <p class="text-lg font-bold">28</p>
                        <p class="text-xs opacity-80">进行中</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">156</p>
                        <p class="text-xs opacity-80">已完成</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">¥89.2万</p>
                        <p class="text-xs opacity-80">活动总销售额</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab Navigation -->
        <div class="px-4 py-2 bg-white border-b border-gray-200">
            <div class="flex space-x-4 overflow-x-auto">
                <button onclick="switchTab('all')" id="tab-all" class="pb-2 border-b-2 border-indigo-600 text-indigo-600 font-medium text-sm whitespace-nowrap tab-btn">
                    全部(184)
                </button>
                <button onclick="switchTab('ongoing')" id="tab-ongoing" class="pb-2 text-gray-500 text-sm whitespace-nowrap tab-btn">
                    进行中(28)
                </button>
                <button onclick="switchTab('upcoming')" id="tab-upcoming" class="pb-2 text-gray-500 text-sm whitespace-nowrap tab-btn">
                    即将开始(12)
                </button>
                <button onclick="switchTab('ended')" id="tab-ended" class="pb-2 text-gray-500 text-sm whitespace-nowrap tab-btn">
                    已结束(144)
                </button>
            </div>
        </div>

        <!-- Activities List -->
        <div class="h-[calc(852px-210px)] overflow-y-auto pb-24">
            <!-- All Activities Tab -->
            <div id="activities-all" class="activity-tab">
                <!-- Flash Sale Activity -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-fire text-white"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center">
                                        <h3 class="text-sm font-medium">新年特惠秒杀</h3>
                                        <span class="ml-2 bg-orange-100 text-orange-600 text-xs px-2 py-0.5 rounded-full">进行中</span>
                                    </div>
                                    <div class="flex space-x-1">
                                        <button onclick="viewActivity('flash-sale-001')" class="text-blue-600 text-xs">详情</button>
                                        <button onclick="editActivity('flash-sale-001')" class="text-gray-600 text-xs">编辑</button>
                                    </div>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs text-gray-600 mb-2">
                                    <div>参与商品: 15个</div>
                                    <div>已售: 186件</div>
                                    <div>转化率: 32.5%</div>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-gray-500">剩余时间: 2天3小时</span>
                                    <span class="text-green-600 font-medium">收益: ¥12,580</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Coupon Activity -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-ticket-alt text-white"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center">
                                        <h3 class="text-sm font-medium">新客专享优惠券</h3>
                                        <span class="ml-2 bg-green-100 text-green-600 text-xs px-2 py-0.5 rounded-full">长期有效</span>
                                    </div>
                                    <div class="flex space-x-1">
                                        <button onclick="viewActivity('coupon-002')" class="text-blue-600 text-xs">详情</button>
                                        <button onclick="editActivity('coupon-002')" class="text-gray-600 text-xs">编辑</button>
                                    </div>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs text-gray-600 mb-2">
                                    <div>满100减20</div>
                                    <div>已领: 523张</div>
                                    <div>使用率: 68.2%</div>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-gray-500">发放总数: 1000张</span>
                                    <span class="text-green-600 font-medium">带动销售: ¥8,420</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Group Buying Activity -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-users text-white"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center">
                                        <h3 class="text-sm font-medium">智能手表拼团</h3>
                                        <span class="ml-2 bg-blue-100 text-blue-600 text-xs px-2 py-0.5 rounded-full">即将开始</span>
                                    </div>
                                    <div class="flex space-x-1">
                                        <button onclick="viewActivity('group-003')" class="text-blue-600 text-xs">详情</button>
                                        <button onclick="editActivity('group-003')" class="text-gray-600 text-xs">编辑</button>
                                    </div>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs text-gray-600 mb-2">
                                    <div>3人成团</div>
                                    <div>拼团价: ¥1099</div>
                                    <div>节省: ¥200</div>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-gray-500">开始时间: 1月10日 10:00</span>
                                    <span class="text-gray-600">预计收益: ¥5,500</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Full Reduction Activity -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-gift text-white"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center">
                                        <h3 class="text-sm font-medium">跨年大促满减</h3>
                                        <span class="ml-2 bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded-full">已结束</span>
                                    </div>
                                    <div class="flex space-x-1">
                                        <button onclick="viewActivity('reduction-004')" class="text-blue-600 text-xs">详情</button>
                                        <button onclick="copyActivity('reduction-004')" class="text-green-600 text-xs">复制</button>
                                    </div>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs text-gray-600 mb-2">
                                    <div>满199减30</div>
                                    <div>满299减50</div>
                                    <div>使用: 1,236次</div>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-gray-500">活动周期: 12/25 - 1/1</span>
                                    <span class="text-green-600 font-medium">实际收益: ¥18,650</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Live Streaming Activity -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-pink-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-video text-white"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center">
                                        <h3 class="text-sm font-medium">年货节直播带货</h3>
                                        <span class="ml-2 bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded-full">直播中</span>
                                    </div>
                                    <div class="flex space-x-1">
                                        <button onclick="viewActivity('live-005')" class="text-blue-600 text-xs">详情</button>
                                        <button onclick="joinLive('live-005')" class="text-red-600 text-xs">进入直播</button>
                                    </div>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs text-gray-600 mb-2">
                                    <div>观看: 2.3万</div>
                                    <div>互动: 5,680</div>
                                    <div>转化: 12.8%</div>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-gray-500">直播时长: 2小时30分</span>
                                    <span class="text-green-600 font-medium">销售额: ¥32,100</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Ongoing Activities Tab -->
            <div id="activities-ongoing" class="activity-tab" style="display: none;">
                <!-- Only ongoing activities would be shown here -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-fire text-white"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center">
                                        <h3 class="text-sm font-medium">新年特惠秒杀</h3>
                                        <span class="ml-2 bg-orange-100 text-orange-600 text-xs px-2 py-0.5 rounded-full">进行中</span>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" checked class="sr-only peer">
                                        <div class="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:bg-green-500 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
                                    </label>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs text-gray-600 mb-2">
                                    <div>参与商品: 15个</div>
                                    <div>已售: 186件</div>
                                    <div>转化率: 32.5%</div>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-orange-600 font-medium">剩余: 2天3小时25分</span>
                                    <span class="text-green-600 font-medium">收益: ¥12,580</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-pink-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-video text-white"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center">
                                        <h3 class="text-sm font-medium">年货节直播带货</h3>
                                        <span class="ml-2 bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded-full">直播中</span>
                                    </div>
                                    <button onclick="joinLive('live-005')" class="bg-red-500 text-white text-xs px-2 py-1 rounded">进入直播</button>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs text-gray-600 mb-2">
                                    <div>观看: 2.3万</div>
                                    <div>互动: 5,680</div>
                                    <div>转化: 12.8%</div>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-red-600 font-medium">直播中: 2小时30分</span>
                                    <span class="text-green-600 font-medium">销售额: ¥32,100</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Upcoming Activities Tab -->
            <div id="activities-upcoming" class="activity-tab" style="display: none;">
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-users text-white"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center">
                                        <h3 class="text-sm font-medium">智能手表拼团</h3>
                                        <span class="ml-2 bg-blue-100 text-blue-600 text-xs px-2 py-0.5 rounded-full">即将开始</span>
                                    </div>
                                    <button onclick="startEarly('group-003')" class="bg-green-500 text-white text-xs px-2 py-1 rounded">提前开始</button>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs text-gray-600 mb-2">
                                    <div>3人成团</div>
                                    <div>拼团价: ¥1099</div>
                                    <div>节省: ¥200</div>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-blue-600 font-medium">倒计时: 1天16小时</span>
                                    <span class="text-gray-600">预计收益: ¥5,500</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Ended Activities Tab -->
            <div id="activities-ended" class="activity-tab" style="display: none;">
                <div class="bg-white border-b border-gray-100 opacity-75">
                    <div class="px-4 py-3">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-gift text-white"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center">
                                        <h3 class="text-sm font-medium text-gray-600">跨年大促满减</h3>
                                        <span class="ml-2 bg-gray-100 text-gray-500 text-xs px-2 py-0.5 rounded-full">已结束</span>
                                    </div>
                                    <div class="flex space-x-1">
                                        <button onclick="viewReport('reduction-004')" class="text-blue-600 text-xs">报告</button>
                                        <button onclick="copyActivity('reduction-004')" class="text-green-600 text-xs">复制</button>
                                    </div>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs text-gray-500 mb-2">
                                    <div>满199减30</div>
                                    <div>满299减50</div>
                                    <div>使用: 1,236次</div>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-gray-400">活动周期: 12/25 - 1/1</span>
                                    <span class="text-green-600 font-medium">收益: ¥18,650</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Actions -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
            <div class="flex gap-3">
                <button onclick="createNewActivity()" class="flex-1 bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-2 rounded-lg font-medium hover:opacity-90 transition-opacity text-sm">
                    <i class="fas fa-plus mr-1"></i>创建活动
                </button>
                <button onclick="exportReport()" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-200 transition-colors text-sm">
                    <i class="fas fa-download mr-1"></i>导出报告
                </button>
            </div>
        </div>
    </div>

    <!-- Filter Modal -->
    <div id="filterModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-t-3xl w-full max-w-[393px] mx-4 max-h-[80vh] overflow-hidden">
            <div class="flex items-center justify-between p-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold">筛选活动</h3>
                <button onclick="hideFilterMenu()" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            
            <div class="p-4 space-y-6 overflow-y-auto max-h-[calc(80vh-120px)]">
                <!-- Activity Type Filter -->
                <div>
                    <h4 class="font-medium mb-3">活动类型</h4>
                    <div class="grid grid-cols-2 gap-2">
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="activityType" value="flash-sale" class="mr-2">
                            <span class="text-sm">限时秒杀</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="activityType" value="coupon" class="mr-2">
                            <span class="text-sm">优惠券</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="activityType" value="group-buying" class="mr-2">
                            <span class="text-sm">拼团活动</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="activityType" value="full-reduction" class="mr-2">
                            <span class="text-sm">满减活动</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="activityType" value="live-streaming" class="mr-2">
                            <span class="text-sm">直播带货</span>
                        </label>
                    </div>
                </div>

                <!-- Performance Filter -->
                <div>
                    <h4 class="font-medium mb-3">效果筛选</h4>
                    <div class="grid grid-cols-2 gap-2">
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="performance" value="high-conversion" class="mr-2">
                            <span class="text-sm">高转化率</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="performance" value="high-revenue" class="mr-2">
                            <span class="text-sm">高收益</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="performance" value="low-performance" class="mr-2">
                            <span class="text-sm">效果待优化</span>
                        </label>
                    </div>
                </div>

                <!-- Time Range Filter -->
                <div>
                    <h4 class="font-medium mb-3">创建时间</h4>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-sm text-gray-600 mb-1">开始日期</label>
                            <input type="date" id="startDate" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-600 mb-1">结束日期</label>
                            <input type="date" id="endDate" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="flex gap-3 p-4 border-t border-gray-200">
                <button onclick="resetFilters()" class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-lg font-medium">
                    重置
                </button>
                <button onclick="applyFilters()" class="flex-1 bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 rounded-lg font-medium">
                    应用筛选
                </button>
            </div>
        </div>
    </div>

    <script>
        // Tab switching functionality
        function switchTab(tabName) {
            // Hide all tab contents
            document.querySelectorAll('.activity-tab').forEach(tab => {
                tab.style.display = 'none';
            });
            
            // Remove active styles from all tab buttons
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('border-b-2', 'border-indigo-600', 'text-indigo-600', 'font-medium');
                btn.classList.add('text-gray-500');
            });
            
            // Show selected tab content
            document.getElementById('activities-' + tabName).style.display = 'block';
            
            // Add active styles to selected tab button
            const activeBtn = document.getElementById('tab-' + tabName);
            activeBtn.classList.remove('text-gray-500');
            activeBtn.classList.add('border-b-2', 'border-indigo-600', 'text-indigo-600', 'font-medium');
        }

        // Activity action functions
        function viewActivity(activityId) {
            window.location.href = `activity-detail.html?id=${activityId}`;
        }

        function editActivity(activityId) {
            // Determine activity type and redirect to appropriate edit page
            if (activityId.includes('flash-sale')) {
                window.location.href = `flash-sale-create.html?edit=${activityId}`;
            } else if (activityId.includes('coupon')) {
                window.location.href = `coupon-distribute.html?edit=${activityId}`;
            } else if (activityId.includes('group')) {
                window.location.href = `group-buying-create.html?edit=${activityId}`;
            } else if (activityId.includes('reduction')) {
                window.location.href = `full-reduction-setup.html?edit=${activityId}`;
            }
        }

        function copyActivity(activityId) {
            if (confirm('确定要复制此活动吗？\\n\\n复制后将创建一个相同配置的新活动')) {
                showToast('活动复制成功，请修改活动时间');
                editActivity(activityId);
            }
        }

        function startEarly(activityId) {
            if (confirm('确定要提前开始此活动吗？\\n\\n活动将立即生效')) {
                showToast('活动已提前开始');
                // Update UI or refresh
            }
        }

        function joinLive(activityId) {
            showToast('正在进入直播间...');
            // In a real app, this would navigate to live streaming interface
        }

        function viewReport(activityId) {
            showToast('正在生成活动报告...');
            // In a real app, this would show detailed analytics report
        }

        function createNewActivity() {
            // Show activity type selection or go to marketing page
            window.location.href = 'b2b-marketing.html';
        }

        function exportReport() {
            if (confirm('导出当前筛选的活动报告？\\n\\n报告将发送到您的邮箱')) {
                showToast('报告导出请求已提交');
            }
        }

        // Filter functions
        function showFilterMenu() {
            document.getElementById('filterModal').classList.remove('hidden');
        }

        function hideFilterMenu() {
            document.getElementById('filterModal').classList.add('hidden');
        }

        function resetFilters() {
            // Reset all filter inputs
            document.querySelectorAll('#filterModal input[type="checkbox"]').forEach(checkbox => {
                checkbox.checked = false;
            });
            document.getElementById('startDate').value = '';
            document.getElementById('endDate').value = '';
            
            // Hide filter indicator
            document.getElementById('filterIndicator').classList.add('hidden');
        }

        function applyFilters() {
            // Check if any filters are applied
            const hasFilters = document.querySelectorAll('#filterModal input:checked').length > 0 ||
                             document.getElementById('startDate').value ||
                             document.getElementById('endDate').value;
            
            if (hasFilters) {
                document.getElementById('filterIndicator').classList.remove('hidden');
                showToast('筛选条件已应用');
            } else {
                document.getElementById('filterIndicator').classList.add('hidden');
                showToast('显示全部活动');
            }
            
            hideFilterMenu();
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            switchTab('all');
            
            // Close modal when clicking outside
            document.getElementById('filterModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    hideFilterMenu();
                }
            });
        });
    </script>
</body>
</html>